<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title></title>
<link rel="stylesheet" href="../layui/css/layui.css">
<link rel="stylesheet" href="../css/general.css">
<link rel="stylesheet" href="../css/reports.css">
</head>
<body class="layui-layout-body">
<div id="operate-record" class="layui-layout layui-layout-admin">
	<div class="layui-header">
		<div class="layui-logo"><img src="../img/common/logo.jpg" alt=""></div>
		<!-- 头部区域（可配合layui已有的水平导航） -->
		<h1>魔力公寓</h1>
		<ul class="layui-nav layui-layout-right">
			<li class="layui-nav-item"> <a href="javascript:;">{{userinfo.loginName}}<img src="../img/common/icon07.gif" class="layui-nav-img"></a>
				<dl class="layui-nav-child">
					<dd><a href="rental_record.html"><img src="../img/common/icon08.png" alt=""><span>修改密码</span></a></dd>
					<dd><a href="rental_record.html"><img src="../img/common/icon09.png" alt=""><span>银行卡信息</span></a></dd>
					<dd><a href="rental_record.html"><img src="../img/common/icon10.png" alt=""><span>安全退出</span></a></dd>
				</dl>
			</li>
		</ul>
	</div>
	<div class="layui-side layui-bg-black">
		<div class="layui-side-scroll"> 
			<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
			<ul class="layui-nav layui-nav-tree"  lay-filter="test">
				<li class="layui-nav-item"><a href="../survey/index.html"><img src="../img/common/icon01.png" alt="">概况</a></li>
				<li class="layui-nav-item"><a href="../rental/index.html"><img src="../img/common/icon02.png" alt="">租务</a></li>
				<li class="layui-nav-item"><a href="../financial_affairs/index.html"><img src="../img/common/icon03.png" alt="">财务</a></li>
				<li class="layui-nav-item on"><a href="../reports/index.html"><img src="../img/common/icon04.png" alt="">报表</a></li>
				<li class="layui-nav-item"><a href="../separate_accounts/index.html"><img src="../img/common/icon05.png" alt="">分账</a></li>
				<li class="layui-nav-item"><a href="../staff/index.html"><img src="../img/common/icon06.png" alt="">员工</a></li>
			</ul>
		</div>
	</div>
	<div class="layui-body"> 
		<!-- 内容主体区域 -->
		<div class="leftContent">
			<ul class="layui-menu">
				<li><a href="index.html">历史概况</a></li>
				<li><a href="rental_record.html" class="on">租务记录</a></li>
			</ul>
		</div>
		<div class="rightContent">
			<div class="section">
				<div class="layui-date">
					<input :class="status.startDateClassObj" @focus="changeStatus('startDateClassObj', 'isActive')" @blur="changeStatus('startDateClassObj', 'isFinish')" type="text" id="startDate" v-model="search.startDate">
					-
					<input :class="status.endDateClassObj" @focus="changeStatus('endDateClassObj', 'isActive')" @blur="changeStatus('endDateClassObj', 'isFinish')" type="text" id="endDate" v-model="search.endDate">
				</div>
				<table class="layui-table" lay-even>
					<colgroup>
					<col width="17%">
					<col width="17%">
					<col width="17%">
					<col width="17%">
					<col width="16%">
					<col width="16%">
					</colgroup>
					<thead>
						<tr>
							<th>租务类型</th>
							<th>经办人</th>
							<th>经办时间</th>
							<th>小区-房间</th>
							<th>租客姓名</th>
							<th>操作</th>
						</tr>
					</thead>
					<tbody v-if="datas.recordList.length>0">
						<tr v-for="t in datas.recordList">
							<td v-if="t.operateType == 0">生成租约</td>
							<td v-if="t.operateType == 1">编辑租约</td>
							<td v-if="t.operateType == 2">办理退租</td>
							<td v-text="t.agentName">小东</td>
							<td v-text="t.time">2018-02-22  15:54:34</td>
							<td v-text="t.roomName">魔力公寓1-101</td>
							<td v-text="t.name">古天乐</td>
							<td><a href="javascript:;" @click="showDetail(t)" class="layui-btn">详情</a></td>
						</tr>
					</tbody>
				</table>
				<div v-if="datas.recordList.length>0" id="laypage"></div>
				<div v-if="datas.recordList.length == 0" class="nothing-box">暂无租务记录</div>
				<div v-if="false" class="lease generate" style="overflow: auto">
					<div class="close"><img @click="isShowDetail=!isShowDetail" src="../img/common/close_img.gif" alt=""></div>
					<p class="genre">租务类型：生成租约</p>
					<p class="title">租约信息</p>
					<p class="headline">基本信息</p>
					<table class="layui-table">
						<colgroup>
						<col width="26%">
						<col width="74%">
						</colgroup>
						<tbody>
							<tr>
								<th>承租人姓名</th>
								<td>Reggie</td>
							</tr>
							<tr>
								<th>手机号码</th>
								<td>135646445454</td>
							</tr>
							<tr>
								<th>身份证号码</th>
								<td>441283197902345678</td>
							</tr>
							<tr>
								<th>身份证照片</th>
								<td><img src="../img/common/photo01.jpg" alt=""></td>
							</tr>
						</tbody>
					</table>
					<p class="headline">租赁信息</p>
					<table class="layui-table">
						<colgroup>
						<col width="26%">
						<col width="74%">
						</colgroup>
						<tbody>
							<tr>
								<th>租赁时间</th>
								<td>2018/03/19到2019/03/18</td>
							</tr>
							<tr>
								<th>租金</th>
								<td>1000元/月</td>
							</tr>
							<tr>
								<th>押金</th>
								<td>1000元/月</td>
							</tr>
							<tr>
								<th>支付方式</th>
								<td>季付</td>
							</tr>
							<tr>
								<th>提前支付天数</th>
								<td>0天</td>
							</tr>
							<tr>
								<th>账单周期</th>
								<td>按自然月（每月1号-月末日）</td>
							</tr>
						</tbody>
					</table>
					<p class="headline">杂费信息</p>
					<table class="layui-table">
						<colgroup>
						<col width="26%">
						<col width="31%">
						<col width="43%">
						</colgroup>
						<tbody>
							<tr>
								<th>水费</th>
								<td>按表收费<br>
									抄表时间：2018.03.02</td>
								<td>费用单价：1元 /吨<br>
									抄表读数：12</td>
							</tr>
							<tr>
								<th>物业费</th>
								<td>固定每月收费</td>
								<td>1000元/月</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div v-if="isShowDetail && recordInfo.operateType !== 2" class="lease edit" style="overflow: auto">
					<div class="close"><img @click="isShowDetail=!isShowDetail" src="../img/common/close_img.gif" alt=""></div>
					<p v-if="recordInfo.operateType == 0"  class="genre">租务类型：生成租约</p>
					<p v-if="recordInfo.operateType == 0" class="title">租约信息</p>
					<p v-if="recordInfo.operateType == 1" class="genre">租务类型：编辑租约</p>
					<p v-if="recordInfo.operateType == 1" class="title">新租约信息</p>
					<p class="headline">基本信息</p>
					<table class="layui-table">
						<colgroup>
						<col width="26%">
						<col width="74%">
						</colgroup>
						<tbody>
							<tr>
								<th>承租人姓名</th>
								<td v-text="recordInfo.renterName">Reggie</td>
							</tr>
							<tr>
								<th>手机号码</th>
								<td v-text="recordInfo.phone">135646445454</td>
							</tr>
							<tr>
								<th>身份证号码</th>
								<td v-text="recordInfo.idNumber">441283197902345678</td>
							</tr>
							<tr>
								<th>身份证照片</th>
								<td ><img src="../img/common/photo01.jpg" alt=""></td>
							</tr>
						</tbody>
					</table>
					<p class="headline">租赁信息</p>
					<table class="layui-table">
						<colgroup>
						<col width="26%">
						<col width="74%">
						</colgroup>
						<tbody>
							<tr>
								<th>租赁时间</th>
								<td>{{recordInfo.startDate}}到{{recordInfo.endDate}}</td>
							</tr>
							<tr>
								<th>租金</th>
								<td v-text="recordInfo.rental">1000元/月</td>
							</tr>
							<tr>
								<th>押金</th>
								<td v-text="recordInfo.deposit">1000元/月</td>
							</tr>
							<tr>
								<th>支付方式</th>
								<td>{{recordInfo.payWay}}个月支付一次</td>
							</tr>
							<tr >
								<th>提前支付天数</th>
								<td>{{recordInfo.rentWay.day}}天</td>
							</tr>
							<tr v-if="recordInfo.rentWay.way == 1">
								<th>固定收租日期</th>
								<td>{{recordInfo.rentWay.day}}日</td>
							</tr>
							<tr>
								<th>账单周期</th>
								<td v-text="recordInfo.billPeriod">按自然月（每月1号-月末日）</td>
							</tr>
						</tbody>
					</table>
					<p class="headline">杂费信息</p>
					<table class="layui-table">
						<colgroup>
						<col width="26%">
						<col width="31%">
						<col width="43%">
						</colgroup>
						<tbody v-show="recordInfo.incidental.length>0">
							<tr v-for="cost in recordInfo.incidental" v-if="cost.chargeStandard==0">
								<th v-text="cost.name">水费</th>
								<td>按表收费<br>
									抄表时间：{{cost.meterDate}}</td>
								<td>费用单价：{{cost.price}}<br>
									抄表读数：{{cost.meterNumber}}</td>
							</tr>
							<tr v-for="cost in recordInfo.incidental" v-if="cost.chargeStandard==1">
								<th v-text="cost.name">物业费</th>
								<td>固定每月收费</td>
								<td v-text="cost.price">1000元/月</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div v-if="isShowDetail && recordInfo.operateType === 2" class="lease recede">
					<div class="close"><img @click="isShowDetail=!isShowDetail" src="../img/common/close_img.gif" alt=""></div>
					<p class="genre">租务类型：办理退租</p>
					<table class="layui-table">
						<colgroup>
						<col width="34%">
						<col width="66%">
						</colgroup>
						<tbody>
							<tr>
								<th>小区和房号</th>
								<td v-text="recordInfo.roomName">魔力小区2-房间101</td>
							</tr>
							<tr>
								<th>承租人姓名</th>
								<td v-text="recordInfo.renterName">小东</td>
							</tr>
							<tr>
								<th>合同租金</th>
								<td v-text="recordInfo.rental">1000.00元</td>
							</tr>
							<tr>
								<th>合同押金</th>
								<td v-text="recordInfo.deposit">1000.00元</td>
							</tr>
							<tr>
								<th>合同租赁时间</th>
								<td>{{recordInfo.startDate}}到{{recordInfo.endDate}}</td>
							</tr>
							<tr>
								<th>退租时间</th>
								<td v-text="">2018.03.30</td>
							</tr>
							<tr>
								<th>退租说明</th>
								<td v-text="">租客经常带不三不四的认回来，被强制劝退。</td>
							</tr>
							<tr>
								<th>费用处理</th>
								<td v-text="">应退3000.00元</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
		</div>
	</div>
</div>
<script src="../layui/layui.js"></script>
<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../js/moment.min.js"></script>
<script src="../js/storejson2.min.js"></script>
<script src="../js/mock.js"></script>
<script src="../js/mockdata.js"></script>
<script src="../js/vue.min.js"></script>
<script src="../js/vue.global.js"></script>
<script src="../js/reports/rental_record.js"></script>
</body>
</html>